<template>
    <el-form :inline="true" class="demo-form-inline" size="small">
        <el-form-item label="一级分类">
            <el-select placeholder="请选择" :value="category1Id" @change="getCategoryListTwo">
                <el-option :label="c1.name" :value="c1.id" v-for="c1 in categoryList1" :key="c1.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
            <el-select placeholder="请选择" :value="category2Id" @change="getCategoryListThree">
                <el-option :label="c2.name" :value="c2.id" v-for="c2 in categoryList2" :key="c2.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
            <el-select placeholder="请选择" :value="category3Id" @change="toSaveCategory3Id">
                <el-option :label="c3.name" :value="c3.id" v-for="c3 in categoryList3" :key="c3.id" />
            </el-select>
        </el-form-item>
    </el-form>
</template>

<script>
import { mapActions,mapState } from 'vuex'
export default {
    name: 'CategorySelect',
    data() {
        return {

        }
    },
    mounted() {
        // 页面一挂载就请求一级分类的数据
        this.getCategoryList1()
    },
    methods: {
        ...mapActions('category', ['getCategoryList1', 'getCategoryList2', 'getCategoryList3','saveCategory3Id']),
        // 选中一级分类就获取二级分类的数据
        getCategoryListTwo(id) {
            // 当我们切换一级分类的时候，重新收集2Id 3Id应该为空
            this.getCategoryList2(id)
        },
        // 选中二级分类就获取三级分类的数据
        getCategoryListThree(id) {
            this.getCategoryList3(id)
        },
        // 选中三级分类就更新三级分类id
        toSaveCategory3Id(id) {
            this.saveCategory3Id(id)
        }

    },
    computed: {
        ...mapState('category',['category1Id', 'category2Id', 'category3Id','categoryList1','categoryList2','categoryList3'])
    },
}
</script>

<style lang="scss" scoped>

</style>
